<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>停车场表管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <th:block th:replace="body/head-page :: dva_head_page"/>
    <style type="text/css">
        .city-tree {
            margin-left: 0px;
            padding-top: 10px;
            height: 1400px;
            background-color: whitesmoke;
            overflow: scroll;
        }

        .font-div {
            margin: 10px 0px 10px 10px;
        }

        .font-span {
            font-size: 18px;
        }

        .span-bold {
            font-weight: bold;
        }

        .cityS {
            width: 20%;
            background-color: #DFE5EB;
            padding-top: 10px;
        }

        .iframe {
            width: 80%;
            padding-top: 10px;
            height: 1400px;
            background-color: #DFE5EB;
        }

        .div-float {
            float: left;
            background-color: #ffffff;
        }

        .con {
            position: relative;
            float: left;
            left: 50%;
        }

        .box {
            position: relative;
            float: left;
            left: -50%;
            width: 100px;
            height: 100px;
        }

        .eachf5 {
            color: #8888ff;
        }

    </style>
</head>
<body class="page-content-white  fade-in-up">
<div class="page-container">
    <div class="form-body">
        <div class="col-md-7 cityS">
            <div id="city-tree-to-choose" class="city-tree">
                <div style="padding: 0 0 0 20px;">
                    <h4>封闭停车场</h4>
                    <div th:each="data,iterStat : ${parkList}">
                        <a href="javascript:void(0);" th:data-id="${data['id']}" th:value="${data['id']}"onclick="parkToGet(this)">
                            <h5 class="eachf5" th:if="${data['parkType'] == 0}" th:title="${data['name']}"th:text="${#strings.abbreviate(data['name'],10)}"></h5>
                        </a>
                    </div>
                    <h4>路测停车场</h4>
                    <div th:each="data,iterStat : ${parkList}">
                        <a href="javascript:void(0);" th:data-id="${data['id']}" th:value="${data['id']}"onclick="parkToGet(this)">
                            <h5 class="eachf5" th:if="${data['parkType'] == 1}" th:title="${data['name']}"th:text="${#strings.abbreviate(data['name'],10)}"></h5>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-7 iframe">
            <div class="col-md-12" style="height: 10%">
                <div class="div-float div-float-left" style="width: 50%;height: 90%; text-align: center;">
                    <a href="javascript:void(0)">
                        <div class="con">
                            <div class="box">
                                <img style="margin-top: 15px;height: 100px" src="/images/revenue.png"/>
                            </div>
                            <div class="box" style="margin-top: 30px;">
                                <div style="font-family: 方正兰亭纤黑简体;font-size: 40px;color: #78859f;" id="money">0.00</div>
                                <div style="font-family: Microsoft YaHei;font-size: 13px;font-weight: 200;">今日营收(元)
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="div-float" style="width: 50%;height: 90%;text-align: center; ">
                    <a href="javascript:void(0)">
                        <div class="con">
                            <div class="box">
                                <img style="margin-top: 15px;height: 100px" src="/images/revenue2.png"/>
                            </div>
                            <div class="box" style="margin-top: 30px;">
                                <div style="font-family: 方正兰亭纤黑简体;font-size: 40px;color: #78859f;" id="count">0</div>
                                <div style="font-family: Microsoft YaHei;font-size: 13px;font-weight: 200;">车流量</div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-12" style="height: 24%">
                <div class="div-float" style="width: 33%;height: 100%; text-align: center;">
                    <div id="main" style="width: 100%;height:100%;">

                    </div>
                </div>
                <div class="div-float"
                     style="width: 0.5%;height: 100%; text-align: center;background-color: #DFE5EB;"></div>
                <div class="div-float" style="width: 33%;height: 100%; text-align: center;">
                    <div id="main1" style="width: 100%;height:100%;">

                    </div>
                </div>
                <div class="div-float"
                     style="width: 0.5%;height: 100%; text-align: center;background-color: #DFE5EB;"></div>
                <div class="div-float" style="width: 33%;height: 100%; text-align: center;">
                    <div id="berth" style="width: 100%;height:100%;">

                    </div>
                </div>
            </div>
            <div class="col-md-12" style="height: 0.5%"></div>
            <div class="col-md-12" style="height: 24%">
                <div class="div-float" style="width: 49.5%;height: 100%; text-align: center;">
                    <div id="box" style="width: 100%;height:100%;">

                    </div>
                </div>
                <div class="div-float"
                     style="width: 1%;height: 100%; text-align: center;background-color: #DFE5EB;"></div>
                <div class="div-float" style="width: 49.5%;height: 100%; text-align: center;">
                    <div id="box1" style="width: 100%;height:100%;">

                    </div>
                </div>
            </div>
            <div class="col-md-12" style="height: 2%;">

            </div>
            <div class="col-md-12" style="height: 39%">
                <div class="div-float" style="width: 100%;height: 100%; text-align: center;">
                    <div class="ibox float-e-margins" style="height: 100%">
                        <div class="ibox-title" style="height: 10%">
                            <h5>订单数据统计</h5>
                            <div class="pull-right" style="margin-right: 150px;">
                                <div class="btn-group">
                                    <button type="button" class="btn bs-date btn-xs btn-white active"
                                            onclick="loadSaleChart('now','');">当日
                                    </button>
                                    <button type="button" class="btn bs-date btn-xs btn-white bs-date-sale-h">某天</button>
                                    <button type="button" class="btn bs-date btn-xs btn-white active"
                                            onclick="loadSaleChart('halfMonth','');">十五日
                                    </button>
                                    <button type="button" class="btn bs-date btn-xs btn-white bs-date-sale-m">月份</button>
                                    <button type="button" class="btn bs-date btn-xs btn-white bs-date-sale-y">年度</button>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content" style="height: 90%">
                            <div class="row" style="height: 100%">
                                <div class="col-md-9" style="height: 100%">
                                    <div id="chartSale" style="width: 100%;height: 48%;">

                                    </div>
                                    <div class="col-md-12" style="height: 4%;width: 100%">

                                    </div>
                                    <div id="chartSale1" style="width: 100%;height: 48%;">

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <ul class="stat-list" style="list-style-type: none">
                                        <li>
                                            <h2 class="no-margins" id="moneys">0.00</h2>
                                            <small>订单总金额</small>
                                            <div class="stat-percent">元 <i class="fa fa-money text-navy"></i></div>

                                        </li>
                                        <li>
                                            <h2 class="no-margins " id="counts">0</h2>
                                            <small>总订单数</small>
                                            <div class="stat-percent">单 <i class="fa fa-calendar-check-o text-navy"></i>
                                            </div>

                                        </li>

                                        <li>
                                            <h2 class="no-margins " id="completeMoney">0.00</h2>
                                            <small>已完成订单金额</small>
                                            <div class="stat-percent">元 <i class="fa fa-money text-navy"></i>
                                            </div>

                                        </li>
                                        <li>
                                            <h2 class="no-margins " id="completeCount">0</h2>
                                            <small>已完成订单数</small>
                                            <div class="stat-percent">单 <i class="fa fa-calendar-check-o text-navy"></i>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END CONTAINER -->

<!-- BEGIN PAGE JAVASCRIPT-->
<th:block th:replace="body/javascript-page :: javascript_page"/>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>

<script>
    let parkId = "";
    let parkName = "";
    let dateTime = "";
    let modes = "";
    let edateTime = "";
    $(document).ready(function () {
        initFill();
        initDate();
    });
    function initFill() {
        dataFill("","");
    }
    /**
     * 初始化日期选择
     */
    function initDate() {
        $('.bs-date-sale-h').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy/mm/dd',
            autoclose: true,
            todayHighlight: true,
            startView: 2,
            minView: 2,
            endDate: new Date()
        }).on('changeDate', loadHourSaleChart);

        $('.bs-date-sale-m').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy/mm',
            autoclose: true,
            todayHighlight: true,
            startView: 3,
            minView: 3,
            endDate: new Date()
        }).on('changeDate', loadMonthSaleChart);

        $('.bs-date-sale-y').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy/mm',
            autoclose: true,
            todayHighlight: true,
            startView: 4,
            minView: 4,
            endDate: new Date()
        }).on('changeDate', loadYearSaleChart);
    }

    /**
     * @author  姜延鹏
     * @Description  获取停车场信息
     * @param null
     * @date  2020/4/22
     * @return
     */
    function parkToGet(obj) {
        parkId = $(obj).data("id");
        tools.post("/park/parkToGet", {"id":parkId}, function (data) {
            parkName = data.data.name;
            dataFill(parkId, parkName);
        });
    }

    /**
     * @author  姜延鹏
     * @Description  填充数据
     * @param null
     * @date  2020/4/22
     * @return

     */
    function dataFill(parkId, name) {
            //当日收入金额
            $.ajax({
                url: "/order/selectMoneyByParkId",
                dataType: "json",
                data: {"parkId": parkId},
                type: "post",
                success: function (data) {
                    $("#money").text(data.data)
                }
            })
            //当日车流量
            $.ajax({
                url: "/passingRecord/getTodayPassingRecords",
                dataType: "json",
                data: {"parkId": parkId},
                type: "post",
                success: function (data) {
                    $("#count").text(data.data)
                }
            })
            payment(parkId, name);//支付方式占比饼图
            berth(parkId, name)//车位占用率（进出车占比） 饼状图
            parkInfoId(parkId, name);//进出车占比饼图
            income(parkId, name);//收入折线趋势图
            vehicleFlow(parkId, name);//车流折线趋势图
            loadSaleChart(modes, dateTime, edateTime);//订单金额 时间检索 折线趋势图
    }

    /**
     * @author  姜延鹏
     * @Description  支付方式占比饼图
     * @param null
     * @date  2020/4/22
     * @return
     */
    function payment(parkId, name) {
        let myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.ajax({
            url: "/order/selectByInfoId",
            dataType: "json",
            data: {"parkId": parkId},
            type: "post",
            success: function (data) {
                if (data.data.length != 0) {
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text: name + '消费方式',
                            x: 'right'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {//图例
                            orient: 'vertical',
                            left: 'left',
                            data: function () {
                                let res = [];
                                $.each(data.data, function (key, vale) {
                                    res.push({
                                        name: vale.payTypeS,
                                    });
                                });
                                return res;
                            }()
                        },
                        series: [
                            {
                                name: '消费方式',
                                type: 'pie',
                                radius: '55%',
                                data: function () {
                                    let res = [];
                                    $.each(data.data, function (key, vale) {
                                        res.push({
                                            value: vale.count,
                                            name: vale.payTypeS
                                        });
                                    });
                                    return res;
                                }()
                            }
                        ]
                    })
                } else {
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text: cityName + '消费方式',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {//图例
                            orient: 'vertical',
                            left: 'left',
                            data: function () {
                                let res = [];
                                res.push(
                                    {name: "支付宝"},
                                    {name: "微信"},
                                    {name: "余额"},
                                    {name: "现金"},
                                    {name: "场内支付"}
                                );
                                return res;
                            }()
                        },
                        series: [
                            {
                                name: '消费方式',
                                type: 'pie',
                                radius: '55%',
                                data: function () {
                                    let res = [];
                                    res.push(
                                        {value: 0, name: "支付宝"},
                                        {value: 0, name: "微信"},
                                        {value: 0, name: "余额"},
                                        {value: 0, name: "现金"},
                                        {value: 0, name: "场内支付"}
                                    );
                                    return res;
                                }()
                            }
                        ]
                    })
                }
            }

        })
    }

    /**
     * @author  姜延鹏
     * @Description 创建 车位占用率（进出车占比） 饼状图
     * @param null
     * @date  2020/4/22
     * @return
     */
    function berth(parkId, name) {
        let myChart = echarts.init(document.getElementById('berth'));
        myChart.showLoading();
        $.ajax({
            url: "/park/berthByParkId",
            dataType: "json",
            data: {"parkId": parkId},
            type: "post",
            success: function (data) {
                if (data.length != 0) {
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text: name + '车位占用率',
                            x: 'right'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {//图例
                            orient: 'vertical',
                            left: 'left',
                            data: function () {
                                let res = []
                                res.push(
                                    {name: "剩余车位数"},
                                    {name: "占用车位数"}
                                );
                                return res;
                            }()
                        },
                        series: [
                            {
                                name: '车位状态',
                                type: 'pie',
                                radius: '55%',
                                data: function () {
                                    let res = [];
                                    res.push(
                                        {value: data[0].berthSurplus, name: "剩余车位数"},
                                        {value: data[0].occupyNum, name: "占用车位数"}
                                    );
                                    return res;
                                }()
                            }
                        ]
                    })
                }
            }

        })
    }





    /**
     * @author  姜延鹏
     * @Description  当日进出车占比饼图
     * @param null
     * @date  2020/4/22
     * @return

     */
    function parkInfoId(parkId, name) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main1'));
        myChart.showLoading();
        $.ajax({
            url: "/passingRecord/passInfoId",
            dataType: "json",
            data: {"parkId": parkId},
            type: "post",
            success: function (data) {
                if (data.length != 0) {
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text: name + '进出车比例',
                            x: 'right'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {//图例
                            orient: 'vertical',
                            left: 'left',
                            data: function () {
                                let res = []
                                res.push(
                                    {name: "出车数量"},
                                    {name: "进车数量"}
                                );
                                return res;
                            }()
                        },
                        series: [
                            {
                                name: '过车状态',
                                type: 'pie',
                                radius: '55%',
                                data: function () {
                                    let res = [];
                                    res.push(
                                        {value: data[0].outNum, name: "出车数量"},
                                        {value: data[0].enterNum, name: "进车数量"}
                                    );
                                    return res;
                                }()
                            }
                        ]
                    })
                }
            }

        })
    }

    /**
     * @author  姜延鹏
     * @Description  单日收入折线趋势图
     * @param null
     * @date  2020/4/23
     * @return
     */
    function income(parkId, name) {
        let myChart = echarts.init(document.getElementById("box"));
        myChart.showLoading();
        // option 里面的内容基本涵盖你要画的图表的所有内容
        $.ajax({
            url: "/order/dateByInfoId",
            dataType: "json",
            data: {"parkId": parkId},
            type: "post",
            success: function (data) {
                myChart.hideLoading();
                myChart.setOption({
                    title: {
                        text: name + '当日收入',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [0 + "时", 1 + "时", 2 + "时", 3 + "时", 4 + "时", 5 + "时", 6 + "时", 7 + "时", 8 + "时",
                            9 + "时", 10 + "时", 11 + "时", 12 + "时", 13 + "时", 14 + "时", 15 + "时", 16 + "时", 17 + "时",
                            18 + "时", 19 + "时", 20 + "时", 21 + "时", 22 + "时", 23 + "时"]
                    },
                    yAxis: {       //直角坐标系 grid 中的 y 轴
                        type: 'value'
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '收入',
                        type: 'line',
                        stack: '总量',
                        data: function () {
                            let res = [];
                            $.each(data.data, function (key, vale) {
                                res.push({
                                    value: vale.reallyMoney,
                                });
                            });
                            return res;
                        }()
                    }]
                })
            }
        })
    }

    /**
     * @author  姜延鹏
     * @Description  当日车流折线趋势图
     * @param null
     * @date  2020/4/23
     * @return                                   还没写controller
     */
    function vehicleFlow(parkId, name) {
        let myChart = echarts.init(document.getElementById("box1"));
        myChart.showLoading();
        // option 里面的内容基本涵盖你要画的图表的所有内容
        $.ajax({
            url: "/passingRecord/vehicleFlow",
            dataType: "json",
            data: {"parkId": parkId},
            type: "post",
            success: function (data) {
                myChart.hideLoading();
                myChart.setOption({
                    title: {
                        text: name + '当日车流量',
                        x: 'center'
                    },
                    // legend: {
                    //     data:['收入']
                    // },
                    tooltip: {
                        trigger: 'axis'
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [0 + "时", 1 + "时", 2 + "时", 3 + "时", 4 + "时", 5 + "时", 6 + "时", 7 + "时", 8 + "时",
                            9 + "时", 10 + "时", 11 + "时", 12 + "时", 13 + "时", 14 + "时", 15 + "时", 16 + "时", 17 + "时",
                            18 + "时", 19 + "时", 20 + "时", 21 + "时", 22 + "时", 23 + "时"]
                    },
                    yAxis: {       //直角坐标系 grid 中的 y 轴
                        type: 'value'
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '车流量',
                        type: 'line',
                        stack: '总量',
                        data: function () {
                            let res = [];
                            $.each(data.data, function (key, vale) {
                                res.push({
                                    value: vale.count,
                                });
                            });
                            return res;
                        }()
                    }]


                })
            }
        })
    }

    /**
     * @author  姜延鹏
     * @Description  加载 订单金额和订单数 时间检索 折线趋势图  某天数据
     * @param null
     * @date  2020/4/22
     * @return

     */
    function loadHourSaleChart(e) {
        let date = e.date.getFullYear() + "-" + (e.date.getMonth() + 1) + "-" + e.date.getDate();
        dateTime = date;
        modes = "day";
        edateTime = e.date;
        loadSaleChart("day", date, e.date);
    }

    /**
     * @author  姜延鹏
     * @Description  加载 订单金额和订单数 时间检索 折线趋势图 月份数据
     * @param null
     * @date  2020/4/22
     * @return

     */
    function loadMonthSaleChart(e) {
        let date = e.date.getFullYear() + "-" + (e.date.getMonth() + 1)+ "-" + e.date.getDate();
        dateTime = date;
        modes = "month";
        edateTime = e.date;
        loadSaleChart("month", date, e.date);
    }

    /**
     * @author  姜延鹏
     * @Descr2iption  加载 订单金额和订单数 时间检索 折线趋势图 年度数据
     * @param null
     * @date  2020/4/22
     * @return

     */
    function loadYearSaleChart(e) {
        let date = e.date.getFullYear() + "-" + (e.date.getMonth() + 1)+ "-" + e.date.getDate();
        modes = "year";
        dateTime = date;
        edateTime = e.date;
        loadSaleChart("year", date, e.date);
    }

    /**
     * @author  姜延鹏
     * @Description  加载 订单金额 时间检索 折线趋势图
     * @param null
     * @date  2020/4/22
     * @return

     */
    function loadSaleChart(mode, d, obj) {
        let id1 = ""
        let name1 = ""
        if (parkId != "") {
            id1 = parkId
        }
        if (parkName != "") {
            name1 = parkName
        }
        let title = "";//标题
        switch (mode) {
            case 'now':
                title = name1 + "当日订单金额";
                modes = "now";
                break;
            case 'day':
                title = name1 + obj.getFullYear() + "年" + (obj.getMonth() + 1) + "月" + obj.getDate() + "日订单金额";
                break;
            case 'halfMonth':
                title = name1 + "近十五日订单金额";
                modes = "halfMonth"
                break;
            case 'month':
                title = name1 + obj.getFullYear() + "年" + (obj.getMonth() + 1) + "月份订单金额";
                break;
            case 'year':
                title = name1 + obj.getFullYear() + "年度订单金额";
                break;
        }
        let myChart = echarts.init(document.getElementById('chartSale'));

        myChart.showLoading();
        $.post("/order/orderByInfoId", {"parkId": id1, "mode": mode, "date": d}, function (data) {
            console.log(data);
            $("#moneys").html(data[0].moneys)
            $("#completeMoney").html(data[0].completeMoney)
            let dataX = [];//x轴数据 时间
                let date = new Date();
                if (mode == 'year') {
                    dataX = ["一月", "二月", "三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
                } else if (mode == 'month') {
                    for(var d = 0; d<data[0].months;d++){
                        dataX.push(d+1+"日");
                    }

                } else if (mode == 'halfMonth') {
                    dataX = [date.getDate()-14 + "日",(date.getDate()-13) + "日",(date.getDate()-12) + "日",(date.getDate()-11) + "日",
                        (date.getDate()-10) + "日",(date.getDate()-9) + "日",(date.getDate()-8) + "日",(date.getDate()-7) + "日",
                        (date.getDate()-6) + "日",(date.getDate()-5) + "日",(date.getDate()-4) + "日",(date.getDate()-3) + "日",
                        (date.getDate()-2) + "日",(date.getDate()-1) + "日",(date.getDate()) + "日"];
                } else if (mode == 'now') {
                    dataX = ["0时","1时","2时","3时","4时","5时","6时","7时","8时",
                        "9时","10时","11时","12时","13时","14时","15时","16时","17时",
                        "18时","19时","20时","21时","22时","23时"];
                } else {

                    dataX = ["0时","1时","2时","3时","4时","5时","6时","7时","8时",
                        "9时","10时","11时","12时","13时","14时","15时","16时","17时",
                        "18时","19时","20时","21时","22时","23时"];
                }

            let dataY = [];//y轴数据 订单总额
            let dataY1 = [];//y轴数据 订单总数
            $.each(data, function (index, item) {
                dataY.push(item.allReallyMoneys);
                dataY1.push(item.reallyMoney);
            });

            //创建折线图
            createLine(myChart, title, "订单总金额", dataX, dataY,dataY1, true, true, "line");
            loadSaleChart1(mode, d, obj,data);
        });

    }

    /**
     * @author  姜延鹏
     * @Description   创建 订单数 时间检索 折线趋势图
     * @param null
     * @date  2020/4/22
     * @return                                   还没写controller

     */
    function loadSaleChart1(mode, d, obj,data) {
        let id1 = ""
        let name1 = ""
        if (parkId != "") {
            id1 = parkId
        }
        if (parkName != "") {
            name1 = parkName
        }
        let title = "";//标题
        switch (mode) {
            case 'now':
                title = name1 + "当日订单数";
                modes = "now"
                break;
            case 'day':
                title = name1 + obj.getFullYear() + "年" + (obj.getMonth() + 1) + "月" + obj.getDate() + "日订单数";
                break;
            case 'halfMonth':
                title = name1 + "近十五日订单数";
                modes = "halfMonth"
                break;
            case 'month':
                title = name1 + obj.getFullYear() + "年" + (obj.getMonth() + 1) + "月份订单数";
                break;
            case 'year':
                title = name1 + obj.getFullYear() + "年度订单数";
                break;
        }
        let myChart = echarts.init(document.getElementById('chartSale1'));
        myChart.showLoading();
            $("#counts").html(data[0].counts)
            $("#completeCount").html(data[0].completeCount)
            let dataX = [];//x轴数据 时间
            let date = new Date();
            if (mode == 'year') {
                dataX = ["一月", "二月", "三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
            } else if (mode == 'month') {
                for(var d = 0; d<data[0].months;d++){
                    dataX.push(d+1+"日");
                }
            } else if (mode == 'halfMonth') {
                dataX = [date.getDate()-14 + "日",(date.getDate()-13) + "日",(date.getDate()-12) + "日",(date.getDate()-11) + "日",
                    (date.getDate()-10) + "日",(date.getDate()-9) + "日",(date.getDate()-8) + "日",(date.getDate()-7) + "日",
                    (date.getDate()-6) + "日",(date.getDate()-5) + "日",(date.getDate()-4) + "日",(date.getDate()-3) + "日",
                    (date.getDate()-2) + "日",(date.getDate()-1) + "日",(date.getDate()) + "日"];
            } else if (mode == 'now') {
                dataX = ["0时","1时","2时","3时","4时","5时","6时","7时","8时",
                    "9时","10时","11时","12时","13时","14时","15时","16时","17时",
                    "18时","19时","20时","21时","22时","23时"];
            } else {

                dataX = ["0时","1时","2时","3时","4时","5时","6时","7时","8时",
                    "9时","10时","11时","12时","13时","14时","15时","16时","17时",
                    "18时","19时","20时","21时","22时","23时"];
            }
            let dataY = [];//y轴数据 订单总额
            let dataY1 = [];//y轴数据 订单总数
            $.each(data, function (index, item) {
                dataY.push(item.completeCount);
                dataY1.push(item.counts);
            });
            //创建折线图
            createLine1(myChart, title, "总订单数", dataX, dataY1, dataY, true, true, "line");

    }

    /**
     * @author  姜延鹏
     * @Description 创建 订单金额趋势 折线图
     * @param chart 图表
     * @param title 标题
     * @param legend 图例
     * @param dataX x轴数据（数组） 例如：['周一','周二','周三']
     * @param dataY y轴数据（数组）
     * @param isTool 是否展示工具栏
     * @param isZoom 是否展示缩放组件
     * @param type "line":创建折线图 "bar":创建柱状图
     * @date  2020/4/22
     * @return
     */
    function createLine(chart, title, legend, dataX, dataY, dataY1, isTool, isZoom, type) {

        chart.hideLoading();
        let option = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: [legend, '已完成订单金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data:dataX
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: legend,
                    type: type,
                    stack: '总量',
                    areaStyle: {},
                    data: dataY
                },
                {
                    name: '已完成订单金额',
                    type: type,
                    stack: '总量',
                    areaStyle: {},
                    data: dataY1
                }

            ]
        };
        //填充
        chart.setOption(option);
    }

    /**
     * @author  姜延鹏
     * @Description 创建 订单数量趋势 折线图
     * @param chart 图表
     * @param title 标题
     * @param legend 图例
     * @param dataX x轴数据（数组） 例如：['周一','周二','周三']
     * @param dataY y轴数据（数组）
     * @param isTool 是否展示工具栏
     * @param isZoom 是否展示缩放组件
     * @param type "line":创建折线图 "bar":创建柱状图
     * @date  2020/4/22
     * @return
     */
    function createLine1(chart, title, legend, dataX, dataY, dataY1, isTool, isZoom, type) {
        chart.hideLoading();
        // 指定图表的配置项和数据
        let option = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: [legend, '已完成订单']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data:dataX
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: legend,
                    type: type,
                    stack: '总量',
                    areaStyle: {},
                    data: dataY
                },
                {
                    name: '已完成订单',
                    type: type,
                    stack: '总量',
                    areaStyle: {},
                    data: dataY1
                }
            ]
        };
        //填充
        chart.setOption(option);
    }
</script>
<!-- END PAGE JAVASCRIPT-->
</body>
</html>